<template>
	<view class="taskbar" :style="getTaskStyle">
		<view class="task" v-for="(item,index) in getTaskData" :key="index" @click="beforeClick(item)">
			<mt-icon :icon="item.icon"  :have-back="true" class="mt-shadow" color="var(--themeFontColor)"  back-color="var(--themeColor)" :icon-size="item.size" icon-box-size="35px"></mt-icon>
		</view>
	</view>
</template>

<script>
import localforage from 'localforage'
import icon from '../../../common/data/icon'
import common from '../../../common/js/common'
import filter from '../../../common/js/filter'
import {mapState} from 'vuex'
import url from '../../../common/data/url'
	export default {
		data() {
			return {
				state: false,
				basisHeight:45,
				taskNum:1,
				taskData: [{
						icon: 'fa fa-angle-double-up',
						click: this.changeTaskState,
						size:'25px',
						state: false,
						active:true
					},
					{
						icon: 'fa fa-angle-double-down',
						click: this.changeTaskState,
						size:'25px',
						state: true,
						active:true
					}
				]
			}
		},
		computed: {
			...mapState('setting',['taskbar']),
			getTaskData() {
				let activeTaskData = this.taskData.filter(item => item.type == null)
				
				this.taskbar.data.forEach((task) =>{
					// let target = this.taskData.find(item => item.type == task.type) || {}
					let task_ = {...task}
					task_.state = true
					let clickEvent = task.type + 'Event'
					task_.click = this[clickEvent]
					activeTaskData.push(task_)
				})

				return activeTaskData.filter(item => item.state === this.state && item.active == true)
			},
			getTaskStyle(){
				let data = {}
				data.height = this.taskNum * this.basisHeight + "px"

				return filter.compatibleStyles(data)
			}
		},
		methods: {
			
			beforeClick(item) {
				if (item.click == null)
					return this.$tip().warning("功能暂未实现")
				item.click()
				
				if(item.state && item.icon != "fa fa-angle-double-down"){
					this.changeTaskState()
				}

			},
			showEvent(){
				uni.navigateTo({
					url:url.showComponentsPageUrl
				})
			},
			changeTaskState() {
				this.state = !this.state
				this.taskNum= this.state ? this.getTaskData.length:1
			},
			homeEvent(){
				uni.switchTab({
					url:url.homePageUrl
				})
			},
			backEvent(){
				common.back()
			},
			topEvent(){
				uni.pageScrollTo({
					duration:500,
					scrollTop:0
				})
			},
			//前往资源管理
			resourceEvent(){
				// common.toResourceManagePage()
			},
			// 修复(清理缓存)
			repairEvent(){
				uni.clearStorageSync()
				localforage.clear()
			},
			//前往主题设置
			themeEvent(){
				uni.navigateTo({
					url:url.settingUrl + "?type=theme"
				})
			},
			
			settingTaskbarEvent(){
				uni.navigateTo({
					url:url.settingUrl + "?type=taskbar"
				})
			},
			
			logEvent(){
				uni.navigateTo({
					url:url.mtLogPgaeUrl
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.taskbar {
		position: fixed;
		bottom: 70px;
		right: 5px;
		z-index: var(--taskbar-z-index);
		overflow: hidden;
		transition-duration: 0.5s;
		
	}
	
	.task{
		margin: 5px;
	}
</style>